.mobile-bill-view {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .el-date-editor {
    align-self: center;
  }

  .bill-chart {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;

    .chart-container {
      display: grid;
      grid-template-rows: 40px 1fr;

      .content {
        padding: 0 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #009FA8;

        .title {
          font-size: 1em;
          font-weight: bold;
        }
      }

      .chart {
        height: 300px;
        width: 100%;
      }

      .rank-chart {
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 5px;

        .rank-item {
          padding: 10px;
          display: grid;
          grid-template-columns: 20px 1fr 80px;
          align-items: center;

          .rank-amount {
            justify-self: flex-end;
          }
        }

        .rank-item:nth-child(1) {
          color: #d4af37;
          font-weight: bold;
        }

        .rank-item:nth-child(2) {
          color: #a8a8a8;
        }

        .rank-item:nth-child(3) {
          color: #b87333;
        }
      }
    }
  }

  .el-switch {
    .el-switch__core {
      height: 32px;
      width: 80px;
    }
  }

  .bill-setting {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .button-container {
      align-self: center;

      display: flex;
      gap: 10px;
    }
  }
}
